<template>
  <div class="app-container">
    <div class="filter-container">
      <el-select v-model="listQuery.qnid" class="filter-item" filterable clearable multiple placeholder="问卷">
        <el-option
          v-for="item in questionnaireList"
          :key="item.id"
          :label="item.title"
          :value="item.id"
        >
        </el-option>
      </el-select>
      <el-input v-model="listQuery.actor" class="filter-item" style="width: 150px;" placeholder="角色ID/角色名" />
      <el-date-picker v-model="listQuery.datetime[0]" class="filter-item" type="date" placeholder="开始日期"></el-date-picker>
      <el-date-picker v-model="listQuery.datetime[1]" class="filter-item" type="date" placeholder="结束日期"></el-date-picker>
      <el-button class="filter-item" type="primary" plain icon="el-icon-search" @click="handleFilter">搜索</el-button>
      <el-button class="filter-item" type="success" size="small" :loading="downloadLoading" @click="handleExport()">导出</el-button>
    </div>
    <el-table v-loading="listLoading" :data="list" height="670" border>
      <el-table-column label="编号" prop="id" width="60px" align="center"></el-table-column>
      <el-table-column label="问卷ID" prop="qnid" width="70px" align="center"></el-table-column>
      <el-table-column label="问卷名字" prop="qnname" width="150px" align="center"></el-table-column>
      <el-table-column label="题目ID" prop="topic_id" width="70px" align="center"></el-table-column>
      <el-table-column label="题目内容" prop="topic_content" width="450px" align="center"></el-table-column>
      <el-table-column label="答案" prop="answer" align="center"></el-table-column>
      <el-table-column label="服务器" prop="sid" width="90px" align="center"></el-table-column>
      <el-table-column label="角色ID" prop="actor_id" width="100px" align="center"></el-table-column>
      <el-table-column label="角色名" prop="actor_name" width="100px" align="center"></el-table-column>
      <el-table-column label="等级" prop="level" width="60px" align="center"></el-table-column>
      <el-table-column label="充值金额" prop="amount" width="100px" align="center"></el-table-column>
      <el-table-column label="填写耗时(秒)" prop="answer_time" width="100px" align="center"></el-table-column>
      <el-table-column label="记录时间" prop="log_dt" width="160px" align="center"></el-table-column>
    </el-table>
    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />
  </div>
</template>
<script>
import { getQuestionnaireLog, getQuestionnaireList } from '@/api/operator'
import Pagination from '@/components/Pagination'

export default {
  name: 'QuestionnaireLog',
  components: { Pagination },
  data() {
    return {
      listLoading: false,
      downloadLoading: false,
      listQuery: {
        qnid: [],
        actor: '',
        datetime: [new Date(Date.now() - 86400000 * 7), new Date()],
        page: 1,
        limit: 500
      },
      total: 0,
      questionnaireList: [],
      list: []
    }
  },
  computed: {
  },
  created() {
    this.getList()
    this.getQuestionnaire()
  },
  methods: {
    async getList() {
      this.listLoading = true
      getQuestionnaireLog(this.listQuery).then(response => {
        this.list = response.data.items
        this.total = response.data.total
        this.listLoading = false
      })
    },
    async getQuestionnaire() {
      const res = await getQuestionnaireList()
      this.questionnaireList = res.data.items
    },
    handleExport() {
      this.downloadLoading = true
      getQuestionnaireLog(Object.assign({}, this.listQuery, { export: 1 })).then(response => {
        this.expCodeList = response.data.items
        import('@/vendor/Export2Excel').then(excel => {
          const tHeader = ['编号', '问卷ID', '问卷名字', '题目ID', '题目内容', '答案', '服务器', '角色ID', '角色名', '等级', '充值金额', '填写耗时', '记录时间']
          const filterVal = ['id', 'qnid', 'qnname', 'topic_id', 'topic_content', 'answer', 'sid', 'actor_id', 'actor_name', 'level', 'amount', 'answer_time', 'log_dt']
          const data = this.formatJson(filterVal)
          excel.export_json_to_excel({
            header: tHeader,
            data,
            filename: '问卷日志'
          })
          this.downloadLoading = false
        })
      })
    },
    formatJson(filterVal) {
      return this.expCodeList.map(v => filterVal.map(j => {
        return v[j]
      }))
    },
    handleFilter() {
      this.getList()
    }
  }
}
</script>

